<template>
	<div class="card-confirm-order-carPlate">
		<div class="car-plate" :class="{'fadeIn':fadeInClassFlag,'fadeOut':fadeOutClassFlag}">
			<ul class='zhi'  v-show='carPlate.cState'>
				<li v-for='item in carPlate.characters' :class="{'on': item == carPlate.initItem}" @click="choosePlate(item,'c')" ca="P_选择车牌${{item}}">{{item}}</li>
				<li @click="chooseLetter" ca="P_选择车牌$ABC">ABC</li>
			</ul>
			<ul  class="en" v-show='carPlate.lState'>
				<li v-for='item in carPlate.letters' :class="{'on': item == carPlate.initItem}" @click="choosePlate(item,'l')" ca="P_选择车牌${{item}}">{{item}}</li>
				<li @click="chooseCharacter" ca="P_选择车牌$汉字">汉字</li>
			</ul>
		</div>

	</div>
</template>
<script>
	import common from '../../utils/common';
	export default {
		data() {
				return {
					carPlate: {
						initItem: sessionStorage.getItem("choosePlate")?sessionStorage.getItem("choosePlate"):"沪",
						characters: ["沪", "京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁", "新"],
						letters: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
						cState:true, //车牌中文显示
						lState: false
						//carPlate:this.$route.query.name?this.$route.query.name:"沪",
                        //plateType:this.$route.query.type?this.$route.query.type:"c"
					}
				}
			},
			methods: {
				chooseLetter:function(){
                	this.carPlate.cState = false;
					this.carPlate.lState = true;
				},
				chooseCharacter:function(){
                    this.carPlate.cState = true;
					this.carPlate.lState = false;
				},
			    choosePlate:function(item,type){
			        sessionStorage.setItem("choosePlate",item);
			    	//window.location.href= "{name:this.$route.query.pathfrom?this.$route.query.pathfrom:'confirm-order-service',query:{name:item,type:'c'}}";
			    	var pathfrom = this.$route.query.pathfrom;
			    	var tyreSku = sessionStorage.getItem("tyreSku")||"";
				    var skus = sessionStorage.getItem("skus")||"";
				    var tyrenum = sessionStorage.getItem("tyrenum")||"";
			    	if(pathfrom == "confirm-order-tyre"){
                       this.$route.router.go({ name:pathfrom,query:{tyreSku:tyreSku,skus:skus,num:tyrenum,name:item,type:type},replace: true });
				    }else{				
					// 跳转父级页面
					this.$router.go({name:pathfrom, query:{name:item,type:type},replace:true});
					}	
			    	//window.location.href="#!/"+pathfrom+"?name="+item+"&type="+type;
			    }
			},
			ready: function(){
				
				console.log(this.$route.query.name+this.$route.query.type+",,,"+this.carPlate.initItem);
                if (this.$route.query.type=="c") {
                	this.carPlate.cState = true;
                	this.carPlate.lState = false;
                }else{
                	this.carPlate.cState = false;
                	this.carPlate.lState = true;
                }
                //this.initItem = this.$router.query.name?this.$router.query.name:"沪";
			},
			route:{
				data:function(){
					common.setTitle('选择车牌');  // 设置title
				} 
	        }
	}
</script>
<style lang="scss" scoped>
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	.card-confirm-order-carPlate {
		font-size: rem(14);
		color: #333;
		.form-info {
			padding-left: rem(14);
			font-size: rem(14);
			color: #333;
			background: #fff;
			.item {
				display: flex;
				align-items: center;
				/*width: rem(375);*/
				height: rem(44);
				border-bottom: 1px solid #eee;
				overflow: hidden;
			}
			.car-info {
				.car-name {
					font-size: rem(13);
					color: #999;
					padding-left: rem(10);
					width: rem(127);
				}
				.carplate {
					font-size: rem(13);
					color: #999;
					padding-left: rem(27);
				}
				.carplate-choose {
					height: rem(44);
					display: flex;
					align-items: center;
					margin-left: rem(21);
					div {
						display: block;
						width: rem(42);
						height: rem(24);
						line-height: rem(24);
						background: $blue;
						color: #fff;
						text-align: center;
						border-radius: rem(4);
						b {
							font-weight: normal;
							font-size: rem(14);
						}
						i {
							font-size: rem(9);
							padding-left: rem(3);
						}
					}
					input {
						display: block;
						width: rem(90);
						border: none;
						padding-left: rem(10);
					}
				}
			}
		}
		.car-plate {
			background: #eee;
			width: rem(375);
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2000000;
			/*opacity: 0;
			transform: translateX(1000px);*/
			ul {
				padding-top: 4%;
				padding-left: 4%;
				padding-right: 4%;
				position: relative;
				li {
					width: rem(79);
					height: rem(40);
					line-height: rem(40);
					text-align: center;
					color: #333;
					margin: 0 2.666666666% 2.666666666% 0;
					font-size: rem(14);
					float: left;
					border-radius: rem(4);
					background: #fff;
					&:nth-child(4n) {
						margin-right: 0;
					}
					&.on {
						background: #0299f6;
						color: #fff;
					}
					&:last-child {
						color: #333;
						width: rem(79);
						height: rem(40);
						overflow: hidden;
						margin-right: 0;
					}
					&:last-child:before {
						font-family: "iconfont" !important;
						font-size: rem(14);
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-webkit-text-stroke-width: 0.2px;
						-moz-osx-font-smoothing: grayscale;
						content: "\e606";
						padding-right: rem(5);
					}
				}
			}
			.en {
				height: rem(300);
				li {
					&:last-child {
						color: #333;
						width: rem(79);
						height: rem(40);
						overflow: hidden;
						margin-right: 0;
						margin-left: rem(262);
					}
				}
			}
		}
	}
	
	.fadeIn {
		animation: fadeInRightBig 1s .2s ease both;
	}
	
	@keyframes fadeInRightBig {
		0% {
			opacity: 0;
			transform: translateX(2000px)
		}
		100% {
			opacity: 1;
			transform: translateX(0)
		}
	}
	.fadeOut {
		animation: fadeOutRightBig 1s .2s ease both;
	}
	
	@keyframes fadeOutRightBig {
		0% {
			opacity: 1;
			transform: translateX(0)
		}
		100% {
			opacity: 0;
			transform: translateX(1000px)
		}
	}
</style>